<template>
  <div class="p-3">
    <a-form>
      <a-form-item class="!mb-3">
        <a-button type="primary" @click="showCreateModal">新增</a-button>
      </a-form-item>
    </a-form>
    <a-table
      :bordered="true"
      :columns="columns"
      row-key="id"
      :data-source="tableData"
      :pagination="pagination"
      :loading="tableLoading"
      class="break-all"
    >
      <template #bodyCell="{ column, record }">
        <div v-if="column.key === 'oper'">
          <!-- <a-button class="mr-1 mb-1" @click="check(record)">{{ t("common.check") }}</a-button> -->
          <a-button class="mr-1 mb-1" type="primary" @click="showUpdateModal(record)">{{ t("common.edit") }}</a-button>
          <a-button class="mr-1 mb-1" danger type="primary" @click="deleteRecord(record)">{{
            t("common.delete")
          }}</a-button>
          <a-button type="primary" @click="toggleLine(record)">{{
            record.status ? t("common.doOffline") : t("common.doOnline")
          }}</a-button>
        </div>
        <a-image v-else-if="column.key === 'handPickedUrl'" :src="record.handPickedUrl" :width="250" />
      </template>
    </a-table>
    <a-modal v-model:visible="modalVisible" :title="modalTitle" @ok="modalOk" :width="650">
      <a-form :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
        <a-form-item label="精选名称" v-bind="validateInfos.handPickedName">
          <a-input v-model:value="modelRef.handPickedName" />
        </a-form-item>
        <a-form-item label="图片" v-bind="validateInfos.handPickedUrl">
          <CommonUpload v-model:fileUrl="modelRef.handPickedUrl" />
        </a-form-item>
        <a-form-item label="权重" v-bind="validateInfos.weight">
          <a-input-number v-model:value="modelRef.weight" :min="1" />
        </a-form-item>
        <a-form-item label="会员列表" v-bind="validateInfos.userIds">
          <MemberList v-model:idArr="modelRef.userIds" :data="selectedUserList" v-if="selectedUserList.length > 0" />
          <a-empty v-else class="border border-solid border-gray-100 !mx-0 py-3" />
          <div class="mt-2">
            <a-button type="primary" @click="showUserListModal">添加</a-button>
          </div>
        </a-form-item>
      </a-form>
    </a-modal>
    <MemberListModal v-model:visible="userListModal" v-model:checked-members="selectedUserList" />
  </div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, watch } from "vue";
import { useI18n } from "/@/locales/useI18n";
import { Api, SelectedMember } from "/@/api/manage/officialContent";
import { AppUserInfo, getUsersByIdStr } from "/@/api/manage/userManage";
import { useCURD } from "/@/hooks/web/useCURD";
import MemberListModal from "/@/components/MemberListModal.vue";
import MemberList from "/@/components/MemberList.vue";
import CommonUpload from "/@/components/CommonUpload.vue";
import { toggleLineByStatus } from "/@/components/business";

const { t } = useI18n();
const columns = [
  {
    title: "精选ID",
    dataIndex: "id",
  },
  {
    title: "精选名称",
    dataIndex: "handPickedName",
  },
  {
    title: "图片",
    dataIndex: "handPickedUrl",
    key: "handPickedUrl",
  },
  {
    title: "权重",
    dataIndex: "weight",
  },
  {
    title: "状态",
    dataIndex: "status",
    customRender({ text }: any) {
      return text ? t("common.online") : t("common.offline");
    },
  },
  {
    title: "操作",
    dataIndex: "oper",
    key: "oper",
  },
];
const modelRef = reactive<SelectedMember>({
  handPickedName: "",
  weight: 1,
  handPickedUrl: "",
  status: 0,
  userIds: [],
});
const {
  modalVisible,
  modalTitle,
  validateInfos,
  showCreateModal,
  showUpdateModal,
  modalOk,
  deleteRecord,
  pagination,
  tableLoading,
  tableData,
  reloadTable,
  curd,
} = useCURD<SelectedMember, any>({
  isPagination: true,
  createTitle: "新增精选会员",
  updateTitle: "编辑精选会员",
  deleteMessage: "确认删除该精选会员吗？",
  modelRef,
  fieldRules: ["handPickedName", "weight", "handPickedUrl", "userIds"],
  cudUrl: Api.members,
  getPageUrl: Api.members,
  async onBeforeShowModal(model) {
    if (model) {
      const ids = model.userIds as string[];
      if (ids.length === 0) {
        selectedUserList.value = [];
      } else {
        const data = (await getUsersByIdStr(ids.join(","))) as AppUserInfo[];
        if (data) {
          selectedUserList.value = data;
        }
      }
    }
  },
  onBeforeOk(data, isCreate) {
    if (isCreate) {
      data.status = 0;
    } else {
      delete data.status;
    }
  },
});
onMounted(async () => {
  await reloadTable();
});
function toggleLine(record: SelectedMember) {
  toggleLineByStatus({
    record,
    tableLoading,
    curd,
    reloadTable,
  });
}

const selectedUserList = ref<AppUserInfo[]>([]);
const userListModal = ref(false);
function showUserListModal() {
  userListModal.value = true;
}
</script>
<style lang="less"></style>
